<template>
	<div class="prodata">
		<tithead class="ctx">生产数据</tithead>
		<div id="prodataecharts" style="height: 180rem;"></div>
	</div>
</template>
<script>
	export default {
		name: 'prodata',
		data() {
			return {}
		},
		methods: {
			randArray(len, min, max) {
				//配置一个50到400之间的长度为指定下随机数组
				return Array.from({
					length: len
				}, v => Math.floor(Math.random() * (max - min)) + min);
			}
		},
		mounted() {
			let data = {
				x: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17',
					'18', '19', '20', '21', '22', '23', '00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12',
					'13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'
				],
				data: [{
						name: '一线出站',
						value: this.randArray(24, 50, 400)
					},
					{
						name: '二线出站',
						value: this.randArray(30, 50, 400)
					},
					{
						name: '三线出站',
						value: this.randArray(26, 50, 400)
					},
					{
						name: '分输出站',
						value: this.randArray(40, 50, 400)
					},
				]
			}
			let xTitle = data.data.map(v => v.name)
			let rs = this.ces(document.getElementById('prodataecharts'))
			rs.setOption({
				grid: {
					top: "50px",
					left: "50px",
					right: "22px",
					bottom: "45px"
				},
				color: ["#FFBA00", "#2FC835", "#027D8E", "#D33140"],
				legend: {
					//icon: "rect",
					//left: "right",
					// itemWidth: 23, // 设置宽度
					// itemHeight: 7, // 设置高度
					top: "10px",
					data: xTitle,
					textStyle: {
						//fontSize: 12,
						color: "#A1B0C9"
					}
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: { // 坐标轴指示器，坐标轴触发有效						
						type: 'cross', // 默认为直线，可选为：'line' | 'shadow' | 'cross'
						crossStyle: {
							color: '#999'
						}
					},
					position: this.pf
				},
				xAxis: {
					type: 'category',
					boundaryGap: false, //刻度对齐
					data: data.x,
					axisLabel: {
						color: "#ffffff",
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: "rgba(255, 255, 255, 0.5)"
						}
					},
				},
				yAxis: {
					type: 'value',
					nameTextStyle: {
						color: "#ffffff",
						padding: [0, 0, 0, 351],
					},
					axisLabel: {
						color: "#ffffff",
					},
					splitLine: {
						show: false,
						lineStyle: {
							color: "rgba(27,75,144,.25)"
						}
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: "rgba(255, 255, 255, 0.5)"
						}
					}
				},
				dataZoom: [{ //数据过多,先展示一部分,剩下的可以拖动
					type: 'inside', // inside  slider
					start: 0, //50%
					end: 50, //100%
					//yAxisIndex: [0], //表示y轴折叠
					//xAxisIndex:[0],  //表示x轴折叠  默认x轴折叠
				}],
				series: [{
						name: xTitle[0],
						type: 'line',
						data: data.data[0].value,
						symbol: 'none',
						smooth: true,
					},
					{
						name: xTitle[1],
						type: 'line',
						data: data.data[1].value,
						symbol: 'none',
						smooth: true,
					},
					{
						name: xTitle[2],
						type: 'line',
						data: data.data[2].value,
						symbol: 'none',
						smooth: true,
					},
					{
						name: xTitle[3],
						type: 'line',
						data: data.data[3].value,
						symbol: 'none',
						smooth: true,
					}
				]
			})
		}
	}
</script>
<style lang='scss'>
	.prodata {}
</style>
